<template>
    <div class="diary-title">
        <Col class="demo-tabs-style1">
            <Tabs type="card" @on-click="clickTab">
                <TabPane  :label="i.name" v-for="(i, k) in list" :key="k" :name="i.id.toString()">
                    <diary-column :type="2" :id="id" @childevent="childe"></diary-column>
                </TabPane>
                <Button @click="handleTabsAdd" size="small" slot="extra" style="border: none">更多推送 ></Button>
                <p  slot="extra">热点推送：徐州第四人民医院整形专科春节特惠，双眼皮整形288元预约中！</p>
                <div style="clear: both"></div>
            </Tabs>
        </Col>
    </div>
</template>

<script>
    import diaryColumn from '../../components/DiaryColumn/'

    export default {
        name: "diaryTitle",
        components: {
            diaryColumn
        },
        data () {
          return {
              id:1,
              list:[]
          }
        },
        created () {
           this.getinfo()
        },
        methods: {
            getinfo () {
                let _this = this
                _this.$post('/api/common/getUserGroup',
                    {

                    },function (res) {
                        _this.list = res.data
                    },function (err,errmsg) {
                        _this.$message.error(errmsg);
                    }
                )
            },
            clickTab (tab) {
                console.log(tab)
                this.id = tab
            },
            handleTabsAdd () {
                this.tabs ++;
            },
            childe (data) {
                this.$emit('childevent',data);
            }
        }
    }
</script>

<style  lang="less">
    .diary-title{


    .demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content {
        min-height: 120px;
        margin-top: -16px;
        width: 100%;

    }
        .demo-tabs-style1 > .ivu-tabs-card .ivu-tabs-nav-container{
            height: 38px !important;

        }
        .demo-tabs-style1 .ivu-tabs-nav-right{
            width: 43%;
        }
    .demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content > .ivu-tabs-tabpane {
        background: #fff;
        margin-top: 30px;
    }
     .demo-tabs-style1 >.ivu-tabs-card .ivu-tabs-bar{
            border-bottom: 2px solid #FE5371;
            height: 40px;
        }
     .demo-tabs-style1 >.ivu-tabs-card .ivu-tabs-tab-focused{
         border-color: transparent !important;
     }
    .demo-tabs-style1 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
        border-color: transparent;
        color: white;
        background-color: #ff92a5;
        margin-right: 0;
        height: 38px;
        padding: 8px 26px 4px;
    }

    .demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active {
        background-color: #FE5371 !important;
        color: white;
        border-color: transparent;

    }
        Button{
            border: none;
            background-color:transparent ;
            color:#FE5371 ;
            outline: none;
            float: right;
            margin-top: 14px;
        }
        p{
            margin-top: 14px;
            float: left;
        }

    }
</style>